<template>
  <div class="database-crypto">
    <h2>数据库链接加解密工具</h2>
    <div class="description-box">
      <h3>数据库连接加密说明</h3>
      <p class="description-text">为了防止源码暴露数据库连接字符串，系统提供了数据库加解密功能。</p>
      
      <div class="config-steps">
        <h4>启用加密配置：</h4>
        <ol>
          <li>在 appsettings.json 配置文件中设置 ConnectionStrings:IsEncrypt = true</li>
          <li>选择以下任一密钥配置方式：
            <ul>
              <li><strong>方式1</strong>：在 appsettings.json 中配置 ConnectionStrings:Secret (密钥长度必须为16/24/32字节)</li>
              <li><strong>方式2</strong>：在 ConnectionStrings:SecretPath 指定密钥文件路径 (密钥长度必须为16/24/32字节)</li>
            </ul>
          </li>
        </ol>
      </div>
    </div>
    <div class="crypto-section">
      <h3>加密</h3>
      <el-input
        v-model="encryptInput"
        type="textarea"
        :rows="5"
        placeholder="请输入要加密的数据库连接字符串"
      />
      <el-input
        v-model="encryptKey"
        placeholder="请输入加密密钥(16/24/32字节)"
        style="margin-top: 10px"
      />
      <el-button 
        type="primary" 
        @click="handleEncrypt"
        style="margin-top: 10px"
      >
        加密
      </el-button>
      <el-input
        v-model="encryptResult"
        type="textarea"
        :rows="5"
        placeholder="加密结果将显示在这里"
        readonly
        style="margin-top: 10px"
      />
    </div>

    <div class="crypto-section">
      <h3>解密</h3>
      <el-input
        v-model="decryptInput"
        type="textarea"
        :rows="5"
        placeholder="请输入要解密的Base64字符串"
      />
      <el-input
        v-model="decryptKey"
        placeholder="请输入解密密钥(16/24/32字节)"
        style="margin-top: 10px"
      />
      <el-button 
        type="primary" 
        @click="handleDecrypt"
        style="margin-top: 10px"
      >
        解密
      </el-button>
      <el-input
        v-model="decryptResult"
        type="textarea"
        :rows="5"
        placeholder="解密结果将显示在这里"
        readonly
        style="margin-top: 10px"
      />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useDevToolsStore } from '@/stores/devtools'

const devToolsStore = useDevToolsStore()

const encryptInput = ref('')
const encryptKey = ref('')
const encryptResult = ref('')
const decryptInput = ref('')
const decryptKey = ref('')
const decryptResult = ref('')

const handleEncrypt = async () => {
  if (!encryptInput.value || !encryptKey.value) {
    return
  }
  try {
    const result = await devToolsStore.encrypt(encryptInput.value, encryptKey.value)
    encryptResult.value = result
  } catch (error) {
    console.error('加密失败:', error)
    encryptResult.value = '加密失败: ' + error.message
  }
}

const handleDecrypt = async () => {
  if (!decryptInput.value || !decryptKey.value) {
    return
  }
  try {
    const result = await devToolsStore.decrypt(decryptInput.value, decryptKey.value)
    decryptResult.value = result
  } catch (error) {
    console.error('解密失败:', error)
    decryptResult.value = '解密失败: ' + error.message
  }
}
</script>

<style scoped>
.database-crypto {
  padding: 20px;
}
.crypto-section {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 4px;
}
.description-box {
  margin-bottom: 30px;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 4px;
  border-left: 4px solid #409eff;
}
.description-text {
  color: #606266;
  margin-bottom: 15px;
}
.config-steps {
  margin-top: 15px;
}
.config-steps ol, 
.config-steps ul {
  padding-left: 20px;
}
.config-steps li {
  margin-bottom: 8px;
  line-height: 1.6;
}
h2 {
  margin-bottom: 20px;
}
h3 {
  margin-bottom: 15px;
}
h4 {
  margin: 15px 0 10px;
  color: #303133;
}
</style>
